/**
* @name 菜单卡片多选
* @description:
* @param
* @return
*/
<template>
	<view class="menuCardCheckBox" v-if="menuList.length>0">
		<view class="menuTitle">{{type}}</view>

		<view 
			class="content" 
			v-for="(item,idx) of menuList" 
			:key="idx" 
			@click="checked(item,idx)"
		>
			<!-- 菜单图片 -->
			<u-image class="img" width="240rpx" height="180rpx" :src="imgUrl(item.pic)"></u-image>

			<view class="menuInfo">
				<view class="title option">{{item.title}}</view>
				
				<view class="isspicy option">{{item.isspicy === 1 ? '辣' : ''}}</view>
				
				<view class="description option">{{item.description}}</view>
				
				<!-- 勾选图标 -->
				<u-icon
					class="icon option u-row-right"
					:name="item.checked ? 'checkbox-mark' : null"
					color="#F43A3D"
					size="50"
				></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			type: { //菜单名称
				type: String,
				required: true
			},
			menu: { //菜单
				type: Array,
				required: true
			}
		},
		data(){
			return{
				// current:-1,//当前选中项
				menuList:[],//过滤后的菜单列表
				checkMenuList:[]//勾选中的选项
			}
		},
		watch:{
			menu:{
				handler(val){
					let newVal = this.$u.deepClone(val);
					this.menuList = this.filterMenu(newVal);
				},
				immediate:true,
				deep:true
			}
		},
		methods: {
			checked(item,idx) {//勾选中
				if(this.checkMenuList.indexOf(item) === -1){//如果没有相同就添加进去数组
					this.menuList[idx].checked = true
					this.checkMenuList.push(item)
				}else{//如果相同则删除数组相应的选项
				this.menuList[idx].checked = false
					this.checkMenuList.splice(idx,1)
				}
				this.$emit('checkMenu', this.checkMenuList);
			},
			filterMenu(arr) {
				//过滤菜单
				arr.map(item => {
					return (item.checked = false);
				});
				return arr;
			},
			clearChecked(){//清空勾选项目
				this.menuList.map((items)=>{
					items.checked = false
				})
				this.checkMenuList = []
			}
		},
		// created(){
		// 	this.filterMenu(this.menu);
		// }
	}
</script>

<style lang="scss" scoped>
	// 标题类型
	.menuTitle {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e1e1e1;
		padding: 20rpx 0;
	}
	
	//内容盒子样式
	.content {
		display: flex;
		border-bottom: 1rpx solid #e1e1e1;
		padding: 10rpx 0;

		// 图片
		.img {
			width: 240rpx;
			height: 180rpx;
			overflow: hidden;
			border-radius: 30rpx;
			margin-right: 10rpx;
		}
		
		// 菜单信息
		.menuInfo{
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 10rpx 10rpx;
			box-sizing: border-box;
			.option{
				margin: 2rpx 0;
			}
			.title{
				font-size: 30rpx;
			}
			.icon{
				
			}
		}
	}
</style>
